<template>
    <div class="qunjishu">
        <a @click="payBtn">
            <div class="qunbtn" :class="{ isPay: pay.isPay }">
                {{ pay.isPay ? pay.payText : pay.text }}
            </div>
        </a>
        <a href="#"><font color="#ffffff">.</font></a>
    </div>
</template>

<script>
import request from "@/utils/request";
import {createOrder} from "@/api";
import StorageUtil from "@/utils/storage";
import { URL } from "@/config/url";

export default {
    name: 'PayButton',
    props: {
        pay: {
            type: Object,
            required: false
        }
    },
    methods: {
        payBtn() {
            const that = this
            if (this.pay.isPay) {
                this.$router.push('/code-page')
                return
            }
            // 步骤 1: 请求后端生成微信支付参数
            createOrder('1', {
                amount: {
                    total: 990,
                    currency: "CNY"
                },
                description: "支付测试",
                notifyUrl: "http://43.139.180.72:8080/pay/v3/notify/order", // 支付成功后的回调地址
            }).then(res => {
                const { appId, timeStamp, nonceStr, packageValue: pkg, signType, paySign } = res;

                if (!appId) {
                    return alert('获取信息失败，请点击重试!');
                }
                // 步骤 2: 等待 WeixinJSBridge 准备好
                const onBridgeReady = () => {
                    WeixinJSBridge.invoke(
                        'getBrandWCPayRequest',
                        {
                            appId,
                            timeStamp,
                            nonceStr,
                            package: pkg,
                            signType,
                            paySign,
                        },
                        function (res) {
                            if (res.err_msg === 'get_brand_wcpay_request:ok') {
                                // 支付成功
                                // alert('支付成功');
                                that.$router.push('/pay-success')
                            } else {
                                // 支付失败或取消
                                alert('支付失败：' + res.err_msg);
                                const projectId = StorageUtil.getProjectId()
                                window.location.href = URL + `?id=${projectId}` ;
                            }
                        }
                    );
                };

                // 微信浏览器中需要判断 WeixinJSBridge 是否已注入
                if (typeof WeixinJSBridge === 'undefined') {
                    if (document.addEventListener) {
                        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                    } else if (document.attachEvent) {
                        document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                    }
                } else {
                    onBridgeReady();
                }
            });
        }
    }
}
</script>

<style scoped>
.qunjishu {
    font-size: 0.9rem;
    margin-top: 0.71rem;
    text-align: center;
    margin-bottom: 10rem;
}

.qunbtn {
    position: fixed;
    width: 90%;
    margin-left: 5%;
    font-size: 1.25rem;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    border-radius: 0.5rem;
    background-color: #425887;
    bottom: 0.4rem;
}

.isPay {
    background-color: #e08a8a;
}
</style>
